<template>
  <div class="category-container">
    <swiper :options="swiperOption" v-if="pages.length">
      <!-- slides -->
      <swiper-slide v-for="page in pages" :key="page.id">
        <div class="category-item" v-for="item in page" :key="item.id">
          <img :src="item.imgSrc">
          <div class="keywords">{{item.keywords}}</div>
        </div>
      </swiper-slide>
      <!-- Optional controls -->
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>
<script>
export default {
  props:["categoryList"],
  data() {
    return {
      swiperOption: {
        pagination: {
          el: ".swiper-pagination"
        },
        loop: true
      }
    };
  },
  computed: {
    // 对category进行分组，每8个item分一页。
    pages() {
      let pageArr = [];
      this.categoryList.forEach((item, index) => {
        let pageNo = Math.floor(index / 8);
        if (!pageArr[pageNo]) pageArr[pageNo] = [];

        pageArr[pageNo].push(item);
      });
      return pageArr;
    }
  }
};
</script>
<style lang="stylus" scoped>
@import '~css/var.styl'

.category-container
  background #fff
  width 100%
  height 3.7rem
  overflow hidden
  padding-top 0.2rem
.swiper-container
  height 100%
.category-item
  width 25%
  height 1.6rem
  font-size 0.28rem
  text-align center
  float left

.category-item img
  width 1.1rem
  height 1.1rem

.category-container>>> .swiper-pagination-bullet-active
  background $bgColor

</style>

</style>



